<template>
  <div class="app-container">
    <div class="container">
      <el-row>
        <!--        分析条件-->
        <el-col :span="7" :xs="24">
          <div class="add" style="color: #ffffff">
            <p style="margin-bottom: 15px; font-weight: bold">分析条件</p>
            <div style="margin-bottom: 15px">设备选择</div>
            <el-select
              v-model="device"
              placeholder="请选择"
              @change="Change"
              filterable
              clearable
              style="width: 100%; margin-bottom: 15px"
            >
              <el-option
                v-for="item in deviceOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="devices"
              placeholder="请选择"
              filterable
              clearable
              style="width: 100%; margin-bottom: 25px"
            >
              <el-option
                v-for="item in channelOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <div style="margin-bottom: 15px">时间选择</div>
            <div style="margin-bottom: 15px">
              <el-date-picker
                style="display: inline-block; margin-right: 15px"
                v-model="value1"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择开始时间1"
              >
              </el-date-picker>
              <el-date-picker
                style="display: inline-block"
                v-model="value2"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择结束时间1"
              >
              </el-date-picker>
            </div>
            <div style="margin-bottom: 15px">
              <el-date-picker
                style="display: inline-block; margin-right: 15px"
                v-model="value3"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择开始时间2"
              >
              </el-date-picker>
              <el-date-picker
                style="display: inline-block"
                v-model="value4"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择结束时间2"
              >
              </el-date-picker>
            </div>
            <!--            <el-date-picker-->
            <!--                v-model="value2"-->
            <!--                type="datetimerange"-->
            <!--                range-separator="至"-->
            <!--                start-placeholder="开始日期"-->
            <!--                end-placeholder="结束日期"-->
            <!--                style="width: 100%;margin-bottom: 25px;">-->
            <!--            </el-date-picker>-->
            <el-button
              type="primary"
              style="
                margin-left: 150px;
                background: #00b8b8;
                color: white;
                border: none;
              "
              @click="btn"
              >开始分析</el-button
            >
          </div>
        </el-col>
        <!--        分析结果-->
        <el-col :span="17" :xs="24">
          <div
            style="
              margin-left: 20px;
              border-left: 1px solid #999999;
              color: #ffffff;
            "
          >
            <p
              style="margin-left: 20px; margin-bottom: 15px; font-weight: bold"
            >
              分析结果
            </p>
            <div style="margin-left: 20px; line-height: 40px">
              <i class="el-icon-s-marketing">数据对比</i>
            </div>
            <div id="main" style="width: 100%; height: 400px"></div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
  
<script>
import {
  getAllDevice,
  getChannelParameters,
  contrastAnalysisHistoryRecord,
} from "@/api/dev/index";
export default {
  name: "DevDataContrast",
  data() {
    return {
      deviceOption: [],
      channelOption: [],
      device: "",
      devices: "",
      value1: "",
      value2: "",
      value3: "",
      value4: "",
    };
  },
  props: {},
  watch: {},
  created() {
    this.getDeviceOption();
  },
  mounted() {
    this.chartA();
    this.$nextTick(() => {
      this.chartA();
    });
  },
  methods: {
    //设备下拉
    getDeviceOption() {
      const data = {
        limit: 500,
        page: 1,
      };
      getAllDevice(data)
        .then((res) => {
          const data = res.data;
          console.log(data, "测试");
          this.deviceOption = data.map((item) => {
            return {
              value: item.deviceId,
              label: item.deviceName,
            };
          });
        })
        .catch((err) => {
          console.log(err);
          // this.$message.error(err.errorMsg)
        });
    },
    // 通道下拉选择
    getChannelOption() {
      getChannelParameters(this.device)
        .then((res) => {
          const data = res.data;
          console.log(data, "测试");
          this.channelOption = data.map((item) => {
            return {
              value: item.channelNo,
              label: item.channelName,
            };
          });
        })
        .catch((err) => {
          console.log(err);
          // this.$message.error(err.errorMsg)
        });
    },
    Change(val) {
      console.log(val);
      this.device = val;
      this.getChannelOption();
    },
    btn() {
      this.chartB();
    },
    chartA() {
      const myChart = this.$echarts.init(document.getElementById("main")); // 先获得这个dom元素并初始化
      // 指定图表的配置项和数据
      const colors = ["#409EFF", "#009688"];
      myChart.setOption({
        backgroundColor: "#002127",
        color: colors,
        // 指示线
        tooltip: {
          trigger: "none",
          axisPointer: {
            type: "cross",
          },
        },
        legend: {
          textStyle: {
            color: "#ffffff",
            fontSize: "20px",
            fontWeight: 700,
          },
        },
        // 图表距离容器距离
        grid: {
          left: "4%",
          right: "4%",
          top: "13%",
          bottom: "8%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            // 隐藏横向网格线
            splitLine: {
              show: false,
            },
            // 横坐标刻度线
            axisTick: {
              alignWithLabel: true,
            },
            // x轴字体设置
            axisLabel: {
              rotate: 0, //倾斜角度
              color: colors[0],
            },
            // 坐标轴
            axisLine: {
              onZero: false,
              lineStyle: {
                color: colors[0],
              },
            },
            // 横向指示标签
            axisPointer: {
              label: {
                formatter: function (params) {
                  return (
                    "温度  " +
                    params.value +
                    (params.seriesData.length
                      ? "：" + params.seriesData[0].data
                      : "")
                  );
                },
              },
            },
            // prettier-ignore
            data: ['2016-1-1 00:00:00', '2016-2', '2016-3', '2016-4', '2016-5', '2016-6', '2016-7', '2016-8', '2016-9', '2016-10', '2016-11', '2016-12'],
          },
          {
            type: "category",
            // 横坐标刻度线
            axisTick: {
              alignWithLabel: true,
            },
            // x轴字体设置
            axisLabel: {
              // interval: 0,
              rotate: 0, //倾斜角度
              color: colors[1],
            },
            // 坐标轴
            axisLine: {
              onZero: false,
              lineStyle: {
                color: colors[1],
              },
            },
            axisPointer: {
              label: {
                formatter: function (params) {
                  return (
                    "温度  " +
                    params.value +
                    (params.seriesData.length
                      ? "：" + params.seriesData[0].data
                      : "")
                  );
                },
              },
            },
            data: [
              "2015-1 00:00:00",
              "2015-2",
              "2015-3",
              "2015-4",
              "2015-5",
              "2015-6",
              "2015-7",
              "2015-8",
              "2015-9",
              "2015-10",
              "2015-11",
              "2015-12",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
            // y轴字体设置
            axisLabel: {
              color: "#ffffff",
            },
            // y轴坐标线条
            axisLine: {
              show: false,
            },
            // 刻度线
            axisTick: {
              show: false,
            },
            // 网格线
            splitLine: {
              show: true,
              lineStyle: {
                color: "#999999",
                type: "dashed",
              },
            },
          },
        ],
        series: [
          {
            name: "",
            type: "line",
            smooth: true,
            emphasis: {
              focus: "series",
            },
            data: [
              3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 1.6, 46.6, 55.4, 18.4, 10.3,
              0.7,
            ],
          },
          {
            name: "温度",
            type: "line",
            xAxisIndex: 1,
            smooth: true,
            emphasis: {
              focus: "series",
            },
            data: [
              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
              2.3,
            ],
          },
        ],
      });
      myChart.resize();
    },
    chartB() {
      const myChart = this.$echarts.init(document.getElementById("main")); // 先获得这个dom元素并初始化
      // 指定图表的配置项和数据
      const colors = ["#409EFF", "#009688"];
      const data = {
        deviceId: this.device,
        channel: this.devices,
        startTime1: this.value1,
        startTime2: this.value3,
        endTime1: this.value2,
        endTime2: this.value4,
      };
      contrastAnalysisHistoryRecord(data)
        .then((res) => {
          // const up = res.data.up
          // const down = res.data.down
          const value = res.data[0].value;
          const time = res.data[0].time;
          const value1 = res.data[1].value;
          const time1 = res.data[1].time;
          const names = res.data[1].channelName;
          myChart.setOption({
            backgroundColor: "#002127",
            color: colors,
            // 指示线
            tooltip: {
              trigger: "none",
              axisPointer: {
                type: "cross",
              },
            },
            legend: {
              textStyle: {
                color: "#ffffff",
                fontSize: "20px",
                fontWeight: 700,
              },
            },
            // 图表距离容器距离
            grid: {
              left: "4%",
              right: "4%",
              top: "13%",
              bottom: "8%",
              containLabel: true,
            },
            xAxis: [
              {
                type: "category",
                // 隐藏横向网格线
                splitLine: {
                  show: false,
                },
                // 横坐标刻度线
                axisTick: {
                  alignWithLabel: true,
                },
                // x轴字体设置
                axisLabel: {
                  rotate: 0, //倾斜角度
                  color: colors[0],
                },
                // 坐标轴
                axisLine: {
                  onZero: false,
                  lineStyle: {
                    color: colors[0],
                  },
                },
                // 横向指示标签
                axisPointer: {
                  label: {
                    formatter: function (params) {
                      return (
                        "" +
                        params.value +
                        (params.seriesData.length
                          ? "：" + params.seriesData[0].data
                          : "")
                      );
                    },
                  },
                },
                // prettier-ignore
                data: time,
              },
              {
                type: "category",
                // 横坐标刻度线
                axisTick: {
                  alignWithLabel: true,
                },
                // x轴字体设置
                axisLabel: {
                  // interval: 0,
                  rotate: 0, //倾斜角度
                  color: colors[1],
                },
                // 坐标轴
                axisLine: {
                  onZero: false,
                  lineStyle: {
                    color: colors[1],
                  },
                },
                axisPointer: {
                  label: {
                    formatter: function (params) {
                      return (
                        "" +
                        params.value +
                        (params.seriesData.length
                          ? "：" + params.seriesData[0].data
                          : "")
                      );
                    },
                  },
                },
                data: time1,
              },
            ],
            yAxis: [
              {
                type: "value",
                // y轴字体设置
                axisLabel: {
                  color: "#ffffff",
                },
                // y轴坐标线条
                axisLine: {
                  show: false,
                },
                // 刻度线
                axisTick: {
                  show: false,
                },
                // 网格线
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: "#999999",
                    type: "dashed",
                  },
                },
              },
            ],
            series: [
              {
                name: "",
                type: "line",
                smooth: true,
                emphasis: {
                  focus: "series",
                },
                data: value,
              },
              {
                name: names,
                type: "line",
                xAxisIndex: 1,
                smooth: true,
                emphasis: {
                  focus: "series",
                },
                data: value1,
              },
            ],
          });
          myChart.resize();
        })
        .catch((err) => {
          // console.log(err)
        });
    },
  },
  components: {},
};
</script>

<style lang='less' scoped>
.app-container {
  width: 100%;
  min-height: 100%;
  // padding: 15px;
  box-sizing: border-box;
  background: #0c323a;

  .container {
    width: 100%;
    background: #002127;
    padding: 15px;
    box-sizing: border-box;
    border-radius: 10px;
    overflow: hidden;
    ::v-deep .el-input__inner {
      background: #041c21;
      border-radius: 4px;
      border: 1px solid rgba(0, 231, 231, 0.502);
      color: #ffffff;
      &::placeholder {
        color: #999999;
      }
    }
  }
}
</style>
  